<template>
  <div class="catalogList" v-if="infoList&&zoneList.length===Object.keys(typeList).length">
    <div class="container">
      <SoundZone :list="allZone" id="all">全区动态</SoundZone>
      <SoundZone
        v-for="(i,key,index) in typeList"
        :key="key"
        :list="zoneList[index]"
        :id="i.catalog_name_alias"
      >{{i.catalog_name}}</SoundZone>
      <slot></slot>
    </div>
    <PageHeader class="header">{{infoList.catalog_name}}</PageHeader>
    <ul class="tag-list">
      <div>
        <li :class="{active:type==='all'}"><a href="javascript:void(0);" @click="moveTo('all')">全区动态</a></li>
        <li
          v-for="li in typeList"
          :key="li.id"
          :class="{active:type===li.catalog_name_alias}"
        ><a href="javascript:void(0);" @click="moveTo(li.catalog_name_alias)">{{li.catalog_name}}</a></li>
      </div>
    </ul>
  </div>
  <ThumbnailLoading v-else></ThumbnailLoading>
</template>

<script>
import PageHeader from "components/public/PageHeader"
import SoundZone from "components/catalogList/SoundZone"
import ThumbnailLoading from "components/public/ThumbnailLoading"
import BScroll from "better-scroll"
import { get } from "util/http"
export default {
  data(){
    return {
       infoList:{},
       allZone:[],
       typeList:{},
       zoneList:[],
       bScroll:null,
       type:'all',
       topList:[]
    }
  },
  components:{
    PageHeader,
    SoundZone,
    ThumbnailLoading
  },
  async mounted(){
    let result = await get({
      url:"/ajax/mobileWeb/catalogs"
    })
    this.infoList=result.info[Object.keys(result.info).find((value)=>{
      return value===this.$route.params.id
    })]
    this.typeList=this.infoList.son
    let all_info=await get({
      url:"/ajax/mobileWeb/catalogrank",
      params:{
        cid:this.$route.params.id
      }
    })
    this.allZone=all_info.info
    for(var i in this.typeList){
      let item=await this.getData(i)
      this.zoneList.push(item.info.Datas)
    }
    await this.$nextTick()
    this.bScroll=new BScroll('.catalogList',{
      probeType:3
    })
    new BScroll('.tag-list',{
      scrollX:true
    })
    this.bScroll.on("scroll",()=>{
      //console.log(1)
    })
  },
  methods:{
    async getData(cid){
      return await get({
        url:"/ajax/mobileWeb/catalogmenu",
        params:{
          order:3,
          cid,
          page_size:4
        }
      })
    },
    moveTo(id){
      this.type=id
      this.bScroll.scrollToElement(`#${id}`,0,0,-75)
    }
  }
}
</script>

<style lang="stylus" scoped>
.catalogList
  height calc(100vh - 0.4rem)
  overflow hidden
  position relative
  .tag-list
    position absolute
    top 0.4rem
    height .35rem
    line-height .35rem
    width 100%
    background-color #fff
    border-bottom 1px solid #e0e0e0
    display: -webkit-box;
    >div
      display flex
      height .35rem
      white-space nowrap
      li
        transition .2s ease 
        height 100%
        margin 0 .1rem
        position relative
        flex-shrink 0
        &:after
          content ""
          display block
          width 100%
          position absolute
          bottom 0.01rem
          border-bottom 0.02rem solid transparent
        &.active
          a
            color #000
          &:after
            border-color #000
        a
          color #9e9e9e
          display block
          font-size .14rem
          width 100%
          height calc(100% - 0.02rem)
  .header
    top 0
  .container
    padding-top .75rem
    width 100%
    
</style>